<template>
	<view class="demo">
		<view class="empyt" v-if="collectionList.length<1">
			暂无收藏
		</view>
		<view class="order-list-box">
			<view class="order-item" v-for="(item,index) in collectionList" :key="index" @click="go(item)">
				<view class="order-item-box">
					<view class="jewelry-msg">
						<view class="image-box">
							<view class="img" :style="{ backgroundImage: 'url(' + item.image + ')' }">
							</view>
						</view>
						<view class="msg-box">
							<view class="name">
								{{item.name}}
							</view>
							<view class="price">
								￥{{item.price}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				collectionList: []
			}
		},
		onShow() {
			this.getList()
		},
		methods: {
			go(item) {
				let data = JSON.stringify(item.id)
				uni.navigateTo({
					url: `/pages/detail/detail?data=${data}`
				})
			},
			getList() {
				uni.request({
					url: "/api/jewerly/collect_list",
					method: 'POST',
					header: {
						token: uni.getStorageSync('token')
					}
				}).then(res => {
					this.collectionList = res.data.data.data;
					console.log(this.collectionList);
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.demo {
		width: 100vw;
		height: 93vh;
		background-color: #f4f5f7;
		display: flex;
		flex-direction: column;
		align-items: center;
		overflow: scroll;
		background-color: white;

		.empyt {
			width: 100%;
			text-align: center;
		}
	}

	.order-list-box {
		width: 100%;
		height: 100%;
		overflow-y: scroll;

		.order-item {
			width: 100%;
			height: 205rpx;
			background-color: white;

			.order-item-box {
				width: 95%;
				height: 100%;
				margin: auto;

				.time-status {
					width: 100%;
					height: 70rpx;
					border-top: 1px solid #dfdfdf;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.time,
					.status {
						font-size: 28rpx;
						color: #a1a1a1;
					}

				}

				.jewelry-msg {
					width: 100%;
					height: calc(100% - 70rpx);
					margin-top: 20rpx;
					display: flex;

					.image-box {
						min-width: 220rpx;
						height: 200rpx;
						background-image: radial-gradient(#969696, #4c4c4c);

						>.img {
							width: 100%;
							height: 100%;
							background-size: contain;
							background-position: center;
							background-repeat: no-repeat;
						}
					}

					.msg-box {
						width: calc(100% - 240rpx);
						height: 200rpx;
						margin-left: 20rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						position: relative;

						.name {
							flex: 1;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							font-weight: bold;
							font-size: 30rpx;
						}

						.order-num {
							flex: 1;
							font-size: 24rpx;
							color: #7a7a7a;
							display: flex;
						}

						.price {
							flex: 1;
							font-weight: bold;
							color: #EEA20E;
							font-size: 30rpx;
						}

						.statusBox {
							position: absolute;
							font-size: 24rpx;
							color: #7a7a7a;
							bottom: 0;
							right: 0;
						}
					}
				}
			}
		}
	}
</style>